<!-- eslint-disable vue/html-indent -->
<template>
  <g :id="props.id">
    <symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-open`">
      <path
        d="M735.2 792.4H287.6C136.9 792.4 14.2 669.8 14.2 519c0-150.9 122.6-273.5 273.4-273.5h447.6c150.7 0 273.4 122.6 273.4 273.4 0 150.9-122.7 273.5-273.4 273.5zM287.6 300.2c-120.6 0-218.7 98.1-218.7 218.7 0 120.8 98.1 218.9 218.7 218.9h447.6c120.6 0 218.7-98.1 218.7-218.7 0-120.8-98.1-218.9-218.7-218.9H287.6z"
        fill="#666666"
      ></path>
      <path
        d="M724.7 687.1c-92.7 0-168.1-75.4-168.1-168.1S632 350.9 724.7 350.9 892.8 426.3 892.8 519s-75.4 168.1-168.1 168.1z m0-278.6c-60.9 0-110.5 49.6-110.5 110.5s49.5 110.5 110.5 110.5S835.1 579.9 835.1 519s-49.5-110.5-110.4-110.5z"
        fill="#666666"
      ></path>
    </symbol>
    <symbol viewBox="0 0 1024 1024" :id="`${props.id}switch-demo-close`">
      <path
        d="M704 224H320C161.216 224 32 353.216 32 512c0 158.816 129.216 288 288 288h384c158.816 0 288-129.184 288-288 0-158.784-129.184-288-288-288z m0 512H320C196.48 736 96 635.488 96 512c0-123.52 100.48-224 224-224h384c123.488 0 224 100.48 224 224 0 123.488-100.512 224-224 224z"
      ></path>
      <path
        d="M320 320c-105.888 0-192 86.112-192 192s86.112 192 192 192 192-86.112 192-192-86.112-192-192-192z m0 320c-70.592 0-128-57.408-128-128s57.408-128 128-128 128 57.408 128 128-57.408 128-128 128z"
      ></path>
    </symbol>
    <use
      v-if="props.isOpen"
      :xlink:href="`#${props.id}switch-demo-open`"
      width="100"
      height="100"
    ></use>
    <use v-else :xlink:href="`#${props.id}switch-demo-close`" width="100" height="100"></use>
  </g>
</template>
<script setup lang="ts">
  const props = defineProps({
    id: {
      type: String,
      default: ''
    },
    isOpen: {
      type: Boolean,
      default: true
    }
  });
</script>
